<template>
	<view class="bg-white" :style="button?'box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);':''">
		<!-- 标题 -->
		<view class="flex">
			<view>
				<view v-if="type==1" class="size-30 bg-blue white ptb-18 plr-28">{{ item.start_time}} 出发 {{item.people_num}}人</view>
				<view v-if="(type==2||type==3)&&item.order_type==1" class="size-30 bg-blue white ptb-18 plr-28">{{ item.start_time}} 出发
					{{type==2?item.people_num+'人':''}}</view>
				<view v-if="(type==2||type==3)&&item.order_type==2" class="size-30 bg-blue white ptb-18 plr-28">我的行程 {{type==2?'余座：'+item.more_seats+'座':''}}</view>
			</view>
			<view class="pr-30">{{item.statusText}}</view>
		</view>
		<!-- 起始点 -->
		<view class="ptb-35 pl-40 pr-28">
			<view class="flex flex-top">
				<view class="flex_l u-flex-1 over-hidden">
					<view class="flex flex-column">
						<view class="bg-purple radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">起点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flex">
							<view class="bold u-flex-1">{{item.start_city+' - '+item.start_name}}</view>
							<view v-if="type==2&&item.order_money!=0" class="red"><text class="size-24">￥</text>{{item.order_money}}</view>
							<view v-if="type==3&&item.platform_service_fee!=0" class="red"><text class="size-24">服务费：￥</text>{{item.platform_service_fee}}</view>
						</view>
						<view class="u-line-1 size-28 mt-12">{{item.start_address}}</view>
					</view>
				</view>
			</view>

			<view v-if="type==1||type==3" class="w100 flex_r" style="height: 30rpx;">
			</view>
			<view v-if="type==2" class="flex_r" style="height: 46rpx;" >
				<view class="flex1 flex-middle" @click.stop="call(item.tel)">
					<view class="mr-10">尾号{{item.newtel}}</view>
					<u-icon name="phone-fill" color="#EA0000" size="30"></u-icon>
				</view>
			</view>

			<view class="flex flex-bottom">
				<view class="flex_l u-flex-1 over-hidden">
					<view class="flex flex-column">
						<view class="bg-red radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">终点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flex">
							<view class="bold u-flex-1">{{item.end_city+' - '+item.end_name}}</view>
						</view>
						<view class="u-line-1 size-28 mt-12">{{item.end_address}}</view>
					</view>    
				</view>
			</view>

			<view v-if="item.order_type==2" class="mt-20 blue">时间：{{item.start_time}}</view>
		</view>
		<!-- 按钮 -->
		<!-- -1=已取消,1=待接单,2=待确认,3=待出发,4=行驶中,5=已完成 -->
		<view class="flex size-32 bold white w100" style="height: 96rpx;" v-if="type!=3&&button">
			<view v-if="type==1" @click="clickButton(item.id)" class="u-flex-1 bg-blue center h100">接单</view>
			<view v-if="type==2" class="flex w100 h100">
				<view v-if="item.status==3||item.status==4" class="bg-gray-2 center h100" style="width: 170rpx;" @click="call(item.tel)">打电话</view>
				<view v-if="item.status==1||item.status==2" class="u-flex-1 bg-blue center h100" @click="toDetail(item.id)">查看详情</view>
				<view v-if="item.status==3" class="u-flex-1 bg-blue center h100" @click="go(item.id)">开始出发</view>
				<view v-if="item.status==4" class="u-flex-1 bg-blue center h100" @click="over(item.id)">结束行程</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String, // 1 首页  2 订单  3 我的订单
			},
			item: {
				type: Object
			},
			button:{ //订单详情  false
				type:Boolean,
				default:true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/shunfeng/order-detail?id=' + id
				})
			},
			//首页抢单
			clickButton(id) {
				this.$http('/addons/ddrive/sforder/ddrive_taking', {
					order_id: id
				}, "POST").then(() => {
					uni.showToast({
						title: '抢单成功'
					})
					setTimeout(() => {
						this.toDetail(id)
					}, 300)
				})
			},
			// 立即出发
			go(id) {
				this.$http('/addons/ddrive/sforder/set_out', {
					order_id: id
				}, "POST").then(() => {
					this.toDetail(id)
				}).catch(()=>{
					this.$emit('update')
				})
			},
			// 结束行程
			over(id) {
				this.$http('/addons/ddrive/sforder/order_complete', {
					order_id: id
				}, "POST").then(() => {
					this.toDetail(id)
				}).catch(()=>{
					setTimeout(()=>{
						this.toDetail(id)
					},1000)
				})
			},
			//打电话
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss">

</style>
